<template>
  <div class="login">
    <div class="login-button">
      <el-button type="text" @click="flag = !flag" v-if="!userInfo"
        >登录</el-button
      >
      <el-dropdown v-else>
        <el-avatar :size="38" :src="userInfo"> </el-avatar>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            ><el-button type="text" @click="logout"
              >注销</el-button
            ></el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="login-card" v-show="flag">
      <el-card>
        <el-form
          :model="loginForm"
          status-icon
          ref="loginForm"
          class="login-form"
          label-position="right"
        >
          <el-form-item label="账号" prop="username">
            <el-input
              type="username"
              v-model="loginForm.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="submit">
              <el-button type="primary" @click="login">提交</el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="button-container">
              <el-button type="text" @click="register" style="float:left">注册</el-button>
              <el-button type="text" @click="register" style="float:right">忘记密码</el-button>
            </div>
          </el-form-item>
        </el-form>
        <div class="close">
          <el-button type="text" @click="flag = false"
            ><i class="el-icon-close"></i
          ></el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      loginForm: {
        username: "test2022",
        password: "test2022",
      },
    };
  },
  methods: {
    login() {
      this.postKeyValueRequest("/api/login", this.loginForm).then((res) => {
        if (res.flag) {
          this.$message.success("登录成功");
          this.$store.commit("handleUserInfo", res.data);
          this.flag = false;
        } else {
          this.$message.error();
          ("登录失败");
        }
      });
    },
    logout() {
      this.postKeyValueRequest("/api/logout").then((res) => {
        if (res.flag) {
          this.$message.success("注销成功");
          localStorage.removeItem("userinfo");
          this.$store.commit("handleUserInfo", null);
        } else {
          this.$message.error();
          ("登录失败");
        }
      });
    },register(){
       this.$message.info("抱歉，功能开发中,毕业设计太忙了");
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.userinfo
        ? this.$store.state.userinfo.avatar
        : null;
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  position: relative;
  height: 100%;
}
.login-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.login-card {
  position: fixed;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  .el-card {
    position: relative;
    width: 518px;
    height: 388px;
    border-radius: 18px;
    .close {
      position: absolute;
      top: 0;
      right: 10px;
    }
    h1 {
      position: absolute;
      top: 0;
      right: 50%;
      transform: translateX(50%);
    }
  }
}
.login-form {
  margin-top: 28px;
}
.button-container {
  width: 100%;
}
.submit .el-button {
  width: 100% !important;
}
</style>